<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
	</head>
	<body>
		<fieldset>
		<legend>记录列表</legend>
		<br>
		<div>
			姓名：<input type="text" id="name" placeholder="姓名" />
			年龄：<input type="text" id="age" placeholder="年龄" />
			<button onclick="testadd()">添加</button>
			<br><br>
			姓名：<input type="text" id="name2" placeholder="姓名" />
			<button onclick="testselect()">搜索</button>
			<br><br>
		</div>
		<table style="border:1px solid black; width:600px;" >
			<thead>
				<tr>
					<th style="width: 15%; text-align: left;">ID</th>
					<th style="width: 30%; text-align: left;">姓名</th>
					<th style="width: 30%; text-align: left;">年龄</th>
					<th style="width: 25%; text-align: left;">操作</th>
				</tr>
			</thead>
			<tbody id="tbody"></tbody>
		</table>
		</fieldset>
		
		<script type="text/javascript">
			var id = 1;
			function testadd(){
				var name = $("#name").val();
				var age = $("#age").val();
				var html = ""
				+"<tr id='tr"+id+"'>"
				+"<td id='tda"+id+"'>"+'#'+id +"</td>"
				+"<td id='tdb"+id+"'>"+ name +"</td>"
				+"<td id='tdc"+id+"'>"+ age +"</td>"
				+"<td id='tdd"+id+"'><a href = 'javascript:testdel("+id+");'>删除</a> <a href = 'javascript:testupdate("+id+");' >修改</a></td>"
				+"</tr>"
				// $("#tbody").html($("#tbody").html()+html);
				$("#tbody").append(html);
				id++;
			}
			function testdel(vid){
				if(confirm("是否删除该条记录？")){
					$("#tr"+vid).remove();	// remove自身及后代都会删除
					//empty 仅删除后代，自身会保留
				}
			}
			function testupdate(vid){// 回显
				$("#tdb"+vid).html("<input type='text' id='tName"+vid+"'+ value='"+$("#tdb"+vid).html()+"'/>");
				$("#tdc"+vid).html("<input type='text' id='tAge"+vid+"' value='"+$("#tdc"+vid).html()+"'/>");
				$("#tdd"+vid).html("<a href='javascript:testsave("+vid+");'>保存</a>");
			}
			function testsave(vid){// 保存
				$("#tdb"+vid).html($("#tName"+vid).val());
				$("#tdc"+vid).html($("#tAge"+vid).val());
				$("#tdd"+vid).html("<a href = 'javascript:testdel("+vid+");'>删除</a> <a href = 'javascript:testupdate("+vid+");' >修改</a>");
			}
			
			function testselect(){
				$("tr").css("background-color","");// 置空
				var val =$("#name2").val();
				if(val == "")
					return;
				$("tr").each(function(){	// td[id^=''tdb'] 属性选择器
					if($(this).find("td[id^='tdb']").text().indexOf(val)>-1){
						$(this).css("background-color","green");
					}
				})
			}
			
		</script>
	</body>
</html>
